<template>
  <div id="suggest">
    <div class="experience-wrap">
      <div class="tip" @click="showAgreement(1)">
        <md-notice-bar mode="link" icon="info-solid">i业主平台的业主大会选举指南</md-notice-bar>
      </div>
      <!-- 没有报名活动 -->
      <div class="tip-text" v-if="!isCanJoin">
        <p>{{showTipText}}</p>
      </div>
      <!-- 报名活动结束 -->
       <div class="tip-text" v-if="isCanJoin && isFinish">
        <p>{{showTipText}}</p>
      </div>
      <!-- 可报名 -->
      <div class="no-join" v-if="isCanJoin && join == 0 && !isFinish">
        <h2>正式报名</h2>
        <md-field class="radio-field">
          <md-radio-list v-model="suggestWay" :options="ways" icon-size="lg" />
        </md-field>
        <div class="apply-wrap">
          <md-button type="primary" round @click="applyWork" size="small">正式报名</md-button>
        </div>
      </div>
      <!-- 已经报名 -->
      <div class="join" v-if="isCanJoin && join == 1 && !isFinish">
        <i class="icon-join"></i>
        <span>您已经报名成功！</span>
        <p>您的报名已提交给业主大会筹备组，请等待结果。</p>
      </div>
      <div class="" v-if="notice != []">
        <div class="tip" v-for="(item,index) in notice" :key="index">
          <md-notice-bar mode="link" type="activity" icon="info-solid">{{item.title}}</md-notice-bar>
        </div>
      </div>
      <h2>业主参选履历表</h2>
      <div>
        <md-field>
          <!-- 上传头像 -->
          <div class="upload-img-wrap">
            <span>上传头像</span>
            <span class="tip">（请上传头像照片）</span>
            <div class="upload-img">
              <md-image-reader
                name="reader"
                @select="onReaderSelect"
                @complete="onReaderComplete"
                @error="onReaderError"
              ></md-image-reader>
              <img :src="experienceInfo.avatar" alt />
            </div>
          </div>
           <!-- 小区专有面积 -->
          <md-input-item
            v-model="experienceInfo.location"
            title="专有面积："
            placeholder=""
            align="right"
            disabled
          ></md-input-item>
          <!-- 业主 -->
          <md-input-item
            v-model="experienceInfo.name"
            title="业主："
            placeholder="请输入业主名称"
            align="right"
            disabled
          ></md-input-item>
        
          <!-- 年龄 -->
          <md-input-item
            v-model="experienceInfo.age"
            title="年龄："
            placeholder="请输入年龄（岁）"
            align="right"
            disabled
          ></md-input-item>
            <!--性别  -->
          <md-field-item
            title="性别："
            arrow="arrow-right"
            :addon="experienceInfo.sex"
            @click="isPickerShow0 = true"
          ></md-field-item>
          <!--职业情况  -->
          <md-field-item
            title="职业情况："
            arrow="arrow-right"
            :addon="experienceInfo.professional"
            @click="isPickerShow1 = true"
          ></md-field-item>
          <!--政治面貌  -->
          <md-field-item
            title="政治面貌："
            arrow="arrow-right"
            :addon="experienceInfo.political"
            @click="isPickerShow2 = true"
          ></md-field-item>
          <!-- 产权坐落 -->
          <!-- <md-field-item
            title="产权坐落："
            arrow="arrow-right"
            solid
            :addon="showLocation"
            @click="isPickerShow3 = true"
          ></md-field-item> -->
          <!-- 居住情况 -->
          <md-field-item
            title="居住情况："
            arrow="arrow-right"
            :addon="experienceInfo.live"
            @click="isPickerShow4 = true"
          ></md-field-item>
          <!-- 行业类别 -->
          <md-field-item
            title="行业类别："
            arrow="arrow-right"
            :addon="experienceInfo.industry"
            @click="isPickerShow5 = true"
          ></md-field-item>
          <!-- 工作单位 -->
          <md-input-item
            v-model="experienceInfo.work"
            title="工作单位："
            placeholder="请输入工作单位"
            align="right"
          ></md-input-item>
          <!-- 专业特长 -->
          <md-input-item
            v-model="experienceInfo.specialty"
            title="专业特长："
            placeholder="请输入专业特长：财务/律师"
            align="right"
          ></md-input-item>
          <div class="check-group">
            <h4>您希望负责（多选）：</h4>
            <md-check-group v-model="insurants">
              <md-check-box name="社区综合提升">社区综合提升</md-check-box>
              <md-check-box name="业委会建设">业委会建设</md-check-box>
              <md-check-box name="财会管理">财会管理</md-check-box>
              <md-check-box name="公共资产运管">公共资产运管</md-check-box>
              <md-check-box name="机电设备维保">机电设备维保</md-check-box>
              <md-check-box name="安全卫生管理">安全卫生管理</md-check-box>
            </md-check-group>
          </div>
          <div class="textarea-block">
            <h4>履职想法与建议：</h4>
            <textarea v-model="experienceInfo.advice" placeholder="限制100字内"></textarea>
          </div>
        </md-field>
      </div>
      <div class="next-btn">
        <md-button type="primary" round @click="saveExperience" size="small">保存履历</md-button>
      </div>
    </div>
    <!-- <div class="nominate-wrap" v-if="join == 1">
      <div class="detail-content" v-if="applyName">
    <h1>{{applyName}}</h1>-->
    <!-- <div class="row">
          <strong>主办单位</strong>江头街道、金尚居委会、金尚第二届业主委员会业主代表李二二，业主代表王六六
        </div>
        <div class="row">
          <strong>协办单位</strong>金尚公安派出所、金尚社区党支部
        </div>
        <div class="row">
          <strong>法律法规</strong>依照《福建省物业管理条例》，金尚小区业主大会议事规则，管理规约，业委会章程有关条款执行。
        </div>
        <div class="row">
          <strong>表决规则</strong>
          <p>业主参与人数占社区业主总数的一半以上,得票前15名的为业委会正式委员，得票16-20名的为业委会后补委员。</p>
    </div>-->
    <!-- </div>
      <h2 v-text="applyGenre == 0? '参选业主委员会' : '参选监事委员会'"></h2>
      <div class="vote-item">
        <div class="top">
          <div class="img-wrap">
            <img :src="experienceInfo.avatar" alt />
          </div>
          <div class="info-wrap">
            <p>
              <span>产权人：</span>
              {{experienceInfo.name}} {{experienceInfo.sex}} {{experienceInfo.age}}岁 {{experienceInfo.professional}} {{experienceInfo.political}}
            </p>
            <p>
              <span>行业类别：</span>
              {{experienceInfo.industry}}
            </p>
            <p>
              <span>个人专长：</span>
              {{experienceInfo.specialty}}
            </p>
          </div>
        </div>
        <div class="bottom">
          <p>
            <span>住址：</span>
            {{experienceInfo.location}}
          </p>
          <p>
            <span>工作单位：</span>
            {{experienceInfo.work}}
          </p>
          <p>
            <span>履职擅长：</span>
            {{experienceInfo.insurants}}
          </p>
          <p>
            <span>履职想法和建议：</span>
            {{experienceInfo.advice}}
          </p>
        </div>
        <div class="btn-block">
          <div class="btn" @click="support">我愿意支持</div>
        </div>
        <div class="person-block">
          <div
            class="person-item"
            v-for="(item,index) in applyInfoList.votes"
            v-if="index < 8"
            :key="index"
          >
            <img :src="item.avatar" alt />
          </div>
        </div>
        <p class="desc">至{{applyInfoList.createtime}}</p>
        <p class="desc">已获得{{applyInfoList.vote}}位业主支持</p>
      </div>
    </div>-->
    <!-- 选项弹窗 -->
    <!-- 性别 -->
    <md-picker
      ref="picker0"
      v-model="isPickerShow0"
      :data="pickerData0"
      @confirm="onPickerConfirm(0)"
      title="性别"
    ></md-picker>
    <!-- 职业情况 -->
    <md-picker
      ref="picker1"
      v-model="isPickerShow1"
      :data="pickerData1"
      is-cascade
      title="职业情况"
      @confirm="onPickerConfirm(1)"
    ></md-picker>
    <!-- 政治面貌 -->
    <md-picker
      ref="picker2"
      v-model="isPickerShow2"
      :data="pickerData2"
      is-cascade
      title="政治面貌"
      @confirm="onPickerConfirm(2)"
    ></md-picker>
    <!-- 产权坐落 -->
    <md-picker
      ref="picker3"
      v-model="isPickerShow3"
      :data="pickerData3"
      is-cascade
      title="产权坐落"
      @confirm="onPickerConfirm(3)"
    ></md-picker>
    <!-- 居住情况 -->
    <md-picker
      ref="picker4"
      v-model="isPickerShow4"
      :data="pickerData4"
      is-cascade
      title="居住情况"
      @confirm="onPickerConfirm(4)"
    ></md-picker>
    <!-- 行业类别 -->
    <md-picker
      ref="picker5"
      v-model="isPickerShow5"
      :data="pickerData5"
      is-cascade
      title="行业类别"
      @confirm="onPickerConfirm(5)"
    ></md-picker>
    <md-landscape v-model="showFullScreen" full-screen>
      <clauses-list :clausesType="clausesType"></clauses-list>
    </md-landscape>
    <md-popup v-model="isPopupShow.center">
      <div class="rules-layer">
        <div class="rules-item">
          <h1>福建省物业管理条例</h1>
          <p>第二十一条 业主委员会委员应当符合下列条件：</p>
          <p>（一）具有业主身份。业主身份的认定以房屋产权证或者不动产权证书记载的权利人为准；尚未领取产权证的，以房屋销（预）售合同及合同备案证明记载的购房人为准。业主可以通过书面形式，委托父母、配偶或者成年子女在委托期间代其行使全部或者部分业主权利；</p>
          <p>（二）具有完全民事行为能力；</p>
          <p>（三）遵纪守法；</p>
          <p>（四）遵守管理规约或者临时管理规约；</p>
          <p>（五）与本物业管理区域内的物业服务企业无利害关系；（六）法律、法规、规章规定的其他条件。</p>
          <p>业主被判处剥夺人身自由刑罚执行期未满的，或者有损坏房屋承重结构、违法搭建、破坏房屋外貌、擅自改变物业使用性质、恶意欠缴物业服务费或者专项维修资金、违法出租房屋等情形且未改正的，不得担任业主委员会委员。</p>
          <p>鼓励在村（居）民委员会中任职的业主兼任所在物业管理区域的业主委员会委员。</p>
        </div>
        <div class="apply-wrap">
          <md-button type="primary" round @click="basicDialog.open = true" size="small">确定</md-button>
        </div>
      </div>
    </md-popup>
       <md-dialog
      title="提示"
      :closable="true"
      v-model="basicDialog.open"
      :btns="basicDialog.btns"
    >
      请仔细阅读法律对参选委员的要求
    </md-dialog>
  </div>
</template>

<script>
import clausesList from "@/components/common/clausesList";
import imageProcessor from "mand-mobile/components/image-reader/image-processor"; //图片压缩
import https from "@/https";
import config from "@/config";
import {
  Field,
  RadioList,
  NoticeBar,
  Button,
  Steps,
  Picker,
  FieldItem,
  InputItem,
  CheckBox,
  CheckGroup,
  ImageReader,
  Toast,
  Dialog,
  Popup,
  Landscape
} from "mand-mobile";

export default {
  components: {
    clausesList,
    [Popup.name]: Popup,
    [Dialog.name]: Dialog,
    [RadioList.name]: RadioList,
    [NoticeBar.name]: NoticeBar,
    [Button.name]: Button,
    [Steps.name]: Steps,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [InputItem.name]: InputItem,
    [CheckBox.name]: CheckBox,
    [CheckGroup.name]: CheckGroup,
    [ImageReader.name]: ImageReader
  },
  name: "suggest",
  data() {
    return {
      qid: "",
      mobile: "",
       basicDialog: {
        open: false,
        btns: [
          {
            text: '我暂不报名',
            handler: this.onBasicCancel,
          },
          {
            text: '我确定报名',
            handler: this.onBasicConfirm,
          },
        ],
      },
      isPopupShow: {},
      showFullScreen: false, //
      clausesType: 1, //条款类型
      suggestWay: "0", //报名类型值
      ways: [
        {
          value: "0",
          text: "参选业主委员会",
          brief: ""
        },
        {
          value: "1",
          text: "参选监事委员会",
          brief: ""
        }
      ], //报名类型
      steps: [
        {
          name: "初选报名时间",
          text: "2019/07/08~2019/07/15"
        },
        {
          name: "提名征集时间",
          text: "2019/07/16~2019/08/05"
        },
        {
          name: "业主大会表决",
          text: "2019/08/06~2019/08/25"
        }
      ],
      isPickerShow0: false,
      isPickerShow1: false,
      isPickerShow2: false,
      isPickerShow3: false,
      isPickerShow4: false,
      isPickerShow5: false,
      pickerData0: [[{ label: "男", value: "1" }, { label: "女", value: "2" }]],
      pickerData1: [
        [{ label: "在职", value: "1" }, { label: "退休", value: "2" }]
      ],
      pickerData2: [
        [
          { label: "无党派", value: "0" },
          { label: "共产党员", value: "1" },
          { label: "民革", value: "2" },
          { label: "民盟", value: "3" },
          { label: "民建", value: "4" },
          { label: "民进", value: "5" },
          { label: "农工", value: "6" },
          { label: "致公", value: "7" },
          { label: "台盟", value: "8" }
        ]
      ],
      pickerData3: [],
      pickerData4: [
        [
          { label: "常住", value: "1" },
          { label: "比较少住", value: "2" },
          { label: "出租中", value: "3" },
          { label: "未装修", value: "4" }
        ]
      ],
      pickerData5: [
        [
          { label: "农、林、牧、渔业", value: "1" },
          { label: "采矿业", value: "2" },
          { label: "制造业", value: "3" },
          { label: "电力、燃气及水的生产和供应业", value: "4" },
          { label: "建筑业", value: "5" },
          { label: "交通运输、仓储和邮政业", value: "6" },
          { label: "信息传输、计算机服务和软件业", value: "7" },
          { label: "批发和零售业", value: "8" },
          { label: "住宿和餐饮业", value: "9" },
          { label: "金融业", value: "10" },
          { label: "房地产业", value: "11" },
          { label: "租赁和商务服务业", value: "12" },
          { label: "科学研究、技术服务和地质勘查业", value: "13" },
          { label: "水利、环境和公共设施管理业", value: "14" },
          { label: "居民服务和其他服务业", value: "15" },
          { label: "教育", value: "16" },
          { label: "卫生、社会保障和社会福利业", value: "17" },
          { label: "文化、体育和娱乐业", value: "18" }
        ]
      ],
      isAdd: true, //是否是新增履历
      location: "", //坐落
      experienceInfo: {
        avatar: "", //头像
        age: "", //年龄
        sex: "", //---性别
        name: "", //---姓名
        // user_id: "", //-----
        professional: "", //职业情况 在职/退休
        candidate: 0, // 参选代表
        political: "", //党派
        location: "", //坐落
        live: "", //居住情况：
        industry: "", //行业类别：
        work: "",
        specialty: "",
        wish: "",
        advice: ""
        // createtime: 0,
        // gender: 0
      }, //履历信息
      insurants: [], //希望负责项目
      join: 0, //是否正式报名
      applyInfoList: [], //初选提名信息
      applyGenre: "0", //已报名类型
      applyName: "", //通告信息,
      isCanJoin: false, //是否能报名
      showTipText: "", // 提示文本
      isFinish: false, //是否报名结束
      signup_id: "", //公告id
      notice: [],//公告列表
    };
  },
  computed: {
    showLocation() {
      if (this.experienceInfo.location.length > 17) {
        return this.experienceInfo.location.slice(0, 17) + "...";
      }
    }
  },
  methods: {
    // 获取公告
    getSolicitation(){
      let qid = this.qid;
      let params = {
        qid
      };
      https
        .fetchPost(config.getSolicitation, params)
        .then(res => {
          if (res.data.code == 1) {
            // console.log(res);
             let solicitation = res.data.data;
             let time = new Date().getTime();
              this.isCanJoin = true;
             if(solicitation.end_time*1000 < time ){
               this.isFinish = true;
                this.showTipText= "报名已截止！";
             }else{
               this.isFinish = false;
                this.signup_id = solicitation.signup_id;
                this.notice = solicitation.notice;
             }
          } else {
            this.isCanJoin = false;
            this.showTipText= res.data.msg;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    showAgreement(index) {
      this.clausesType = index;
      this.showFullScreen = true;
    },
    // 正式报名
    applyWork() {
      let id = this.experienceInfo.id;
      if (!id) {
        Toast.failed("请先填写保存下面履历信息");
        return;
      }
      this.$set(this.isPopupShow, "center", true);
      return;
    },
    onBasicCancel() {
      this.basicDialog.open = false;
      this.$set(this.isPopupShow, "center", false);

    },
    // 确认报名
    onBasicConfirm() {
      let id = this.experienceInfo.id;
      let genre = this.suggestWay;
      let qid = this.qid;
      let mobile =this.mobile;
      let signup_id = this.signup_id;
      let params = {
        mobile,
        genre,
        id,
        qid,
        signup_id
      };
      https
        .fetchPost(config.resumeApply, params)
        .then(res => {
          if (res.data.code == 1) {
            this.basicDialog.open = false
            this.$set(this.isPopupShow, "center", false);
            Toast.succeed(res.data.msg, 2000);
            this.resumeInfo();
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取履历信息
    resumeInfo() {
      let params = {
        mobile: this.mobile,
        qid: this.qid
      };
      https
        .fetchPost(config.resumeInfo, params)
        .then(res => {
          if (res.data.code == 1) {
            this.join = res.data.data.join;
            let info = res.data.data.info;
            if (info != null) {
              this.experienceInfo.id = info.id || "";
              this.experienceInfo.avatar = info.avatar || "";
              this.experienceInfo.age = info.age || "";
              // this.experienceInfo.user_id = info.user_id || "";
              this.experienceInfo.name = info.name || "";
              this.experienceInfo.sex = info.sex || "";
              this.experienceInfo.professional = info.professional || "";
              this.experienceInfo.candidate = info.candidate || 0;
              this.experienceInfo.political = info.political || "";
              this.experienceInfo.location = info.location + '㎡' || "";
              this.experienceInfo.live = info.live || "";
              this.experienceInfo.industry = info.industry || "";
              this.experienceInfo.work = info.work || "";
              this.experienceInfo.specialty = info.specialty || "";
              this.experienceInfo.advice = info.advice || "";
              // this.experienceInfo.createtime = info.createtime || 0;
              // this.experienceInfo.gender = info.gender || 0;
              let wish = info.wish || "";
              if (wish) {
                let arr = wish.split(",");
                this.insurants = arr;
              }
              this.experienceInfo.wish = wish;
              this.isAdd = false;
            } else {
              this.isAdd = true;
            }
            // let landinfo = res.data.data.landinfo;
            // let pickerData = [];
            // if (landinfo.length != 0) {
            //   landinfo.forEach(item => {
            //     let obj = {
            //       label: item.be_located,
            //       value: item.id
            //     };
            //     pickerData.push(obj);
            //   });
            // }
            // this.pickerData3 = [pickerData];
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 保存履历
    saveExperience() {
      let experienceInfo = this.experienceInfo;
          console.log(experienceInfo);

      if(experienceInfo.avatar == "" ||
        experienceInfo.sex == "" ||
        experienceInfo.professional == "" ||
        experienceInfo.political == "" ||
        experienceInfo.location == "" ||
        experienceInfo.live == "" ||
        experienceInfo.industry == "" || 
        experienceInfo.specialty == "" ||
        experienceInfo.wish == "" ||
        experienceInfo.advice == ""){
          Toast.info("请填完整履历信息");
        return;
      }

      experienceInfo.wish = this.insurants.join(",");
      let params = experienceInfo;
      params.mobile = this.mobile;
      if (this.isAdd) {
        delete experienceInfo.id;
      }
      https
        .fetchPost(config.saveResumeInfo, params)
        .then(res => {
          if (res.data.code == 1) {
            Toast.succeed(res.data.msg, 2000);
            this.resumeInfo();
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onPickerConfirm(index) {
      const values = this.$refs[`picker${index}`].getColumnValues();
      let res = "";
      values.forEach(value => {
        value && (res += `${value.text || value.label} `);
      });
      switch (index) {
        case 0: {
          this.experienceInfo.sex = res;
          break;
        }
        case 1: {
          this.experienceInfo.professional = res;
          break;
        }
        case 2: {
          this.experienceInfo.political = res;
          break;
        }
        case 3: {
          this.experienceInfo.location = res;
          break;
        }
        case 4: {
          this.experienceInfo.live = res;
          break;
        }
        case 5: {
          this.experienceInfo.industry = res;
          break;
        }
      }
    },
    // 选图片
    onReaderSelect(name, { files }) {
      Toast.loading("图片读取中...");
    },
    onReaderComplete(name, { dataUrl, file }) {
      let _this = this;
      imageProcessor({
        dataUrl,
        width: 900,
        // height: 1800,
        quality: 0.5
      }).then(({ dataUrl }) => {
        Toast.hide();
        let callBack = function(res) {
          if (res.data.code == 1) {
            _this.experienceInfo.avatar = res.data.data.url;
            Toast.hide();
          } else {
            Toast.hide();
            Toast.failed("图片上传失败，请重试");
          }
        };
        this.saveBase64Image(dataUrl, callBack);
      });
    },
    onReaderError(name, { msg }) {
      Toast.failed(msg);
    },
    // 64图转url
    saveBase64Image(dataUrl, callBack) {
      let params = {
        image: dataUrl
      };
      https
        .fetchPost(config.base64Image, params)
        .then(res => {
          callBack(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 大会公告详情
    // navDetail(index){
    //   this.$router.push({
    //     path: "/publicityDetail",
    //     query: {yid:index}
    //   })
    // },
    // 获取初选提名信息
    // applyInfo() {
    //   let params = {
    //     mobile: this.mobile
    //   };
    //   https
    //     .fetchPost(config.applyInfo, params)
    //     .then(res => {
    //       if (res.data.code == 1) {
    //         if (res.data.data.list.length != 0) {
    //           res.data.data.list[0].createtime = this.dataFormat(
    //             res.data.data.list[0].createtime * 1000,
    //             1
    //           );
    //           this.applyInfoList = res.data.data.list[0];
    //           this.applyGenre = res.data.data.genre;
    //           this.applyName = res.data.data.name;
    //         }
    //       } else {
    //         Toast.failed(res.data.msg);
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },
    dataFormat(num, type) {
      var dd = new Date(num);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var h = dd.getHours();
      var i = dd.getMinutes();
      var s = dd.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      i = i < 10 ? "0" + i : i;
      s = s < 10 ? "0" + s : s;
      if (1) {
        return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
      } else {
        return y + "-" + m + "-" + d;
      }
    },
    // 支持投票
    // support() {
    //   let params = {
    //     mobile: this.mobile,
    //     id: this.applyInfoList.id
    //   };
    //   https
    //     .fetchPost(config.voteApply, params)
    //     .then(res => {
    //       if (res.data.code == 1) {
    //         console.log(res.data);
    //         Toast.succeed(res.data.msg);
    //       } else {
    //         Toast.failed(res.data.msg);
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // }
  },
  created() {
    this.qid = this.$store.state.residentialType.qid;
    this.mobile = this.$store.state.userInfo.mobile;
    this.getSolicitation();
    this.resumeInfo();

  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#suggest {
  .tip {
    padding: 0 0 20px;
  }
  .apply-wrap {
    padding: 0 220px 60px;
  }
  .tip-text {
    padding: 60px 0; 
    display: flex;
    justify-content: center;
    p {
       font-size: 30px;
      color: #666;
      margin-bottom: 15px;
    }
  }
  .join {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0;
    .icon-join {
      width: 150px;
      height: 150px;
      background: url("")
        no-repeat;
      background-size: 100%;
      margin-bottom: 15px;
    }
    span {
      font-size: 28px;
      color: #666;
      margin-bottom: 15px;
    }
    p {
      font-size: 26px;
      color: #999;
    }
  }
  .next-btn {
    padding: 40px 220px 60px;
  }
  h2 {
    padding-left: 30px;
    height: 60px;
    display: flex;
    align-items: center;
    font-size: 30px;
    margin-top: 10px;
    &::before {
      content: "";
      display: block;
      height: 38px;
      border-left: 6px solid $themeGold;
      margin-right: 28px;
    }
  }
  .time-list {
    padding-left: 30px;
    .md-steps {
      height: 350px;
    }
  }
  .textarea-block {
    h4 {
      font-size: 30px;
      line-height: 100px;
    }
    textarea {
      width: calc(100% - 20px);
      height: 180px;
      border: none;
      resize: none;
      outline: none;
      font-size: 28px;
      line-height: 44px;
      padding: 10px;
      color: #333;
      border: 1px solid #eee;
      border-radius: 10px;
    }
  }
  .check-group {
    .md-check-group {
      .md-check-box {
        font-size: 26px;
        margin-bottom: 10px;
        margin-right: 10px;
      }
    }
    h4 {
      font-size: 30px;
      line-height: 100px;
    }
  }
  .upload-img-wrap {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 160px;
    .tip {
      font-size: 26px;
      color: #f7260a;
      position: absolute;
      bottom: 48px;
      left: 130px;
    }
    &::before {
      content: "";
      position: absolute;
      z-index: 2;
      transform: scaleY(0.5) translateY(100%);
      bottom: 0;
      left: 0;
      right: auto;
      top: auto;
      width: 100%;
      border-bottom: 1px solid #e2e4ea;
      transform-origin: 50% 100%;
    }
    span {
      font-size: 32px;
    }
    .upload-img {
      position: absolute;
      right: 0;
      background: #ddd;
      display: flex;
      justify-content: center;
      height: 120px;
      width: 120px;
      border-radius: 12px;
      overflow: hidden;
      img {
        height: 120px;
      }
    }
  }
  .nominate-wrap {
    .detail-content {
      display: flex;
      flex-direction: column;
      padding: 20px 30px;
      border-bottom: 20px solid #f2f2f2;
      background: #fff;
      h1 {
        font-size: 32px;
        font-weight: 600;
        line-height: 50px;
        margin-bottom: 10px;
      }
      .row {
        font-size: 26px;
        color: #666;
        line-height: 40px;
        padding-right: 10px;
        margin-bottom: 10px;
        strong {
          display: flex;
          align-items: center;
          position: relative;
          font-size: 30px;
          height: 50px;
          color: #444;
          font-weight: 600;
          &::before {
            content: "";
            display: block;
            height: 35px;
            border-left: 6px solid $themeGold;
            margin-right: 20px;
          }
        }
      }
    }
    .vote-item {
      display: flex;
      background: #fff;
      flex-direction: column;
      width: 710px;
      padding: 20px 20px;
      .top {
        display: flex;
        // align-items: center;
        font-size: 26px;
        border-bottom: 1px dashed #ccc;
        padding-bottom: 20px;
        .img-wrap {
          display: flex;
          justify-content: center;
          width: 150px;
          height: 150px;
          overflow: hidden;
          border-radius: 14px;
          img {
            height: 150px;
          }
        }
        .info-wrap {
          width: 460px;
          padding-left: 20px;
          p {
            line-height: 38px;
            color: #555;
            margin-bottom: 10px;
            span {
              font-size: 28px;
              color: #2f86f6;
            }
          }
        }
      }
      .bottom {
        padding-top: 10px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f2f2f2;
        p {
          font-size: 26px;
          color: #444;
          line-height: 38px;
          margin-bottom: 10px;
          span {
            font-size: 26px;
            color: #2f86f6;
          }
        }
      }
      .btn-block {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 50px 0 30px;
        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 220px;
          height: 60px;
          border-radius: 40px;
          background: #2f86f6;
          color: #fff;
          font-size: 28px;
        }
      }
      .person-block {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70px;
        width: 660px;
        overflow-x: hidden;
        overflow-y: hidden;
        margin: 0 auto 20px;
        .person-item {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 60px;
          height: 60px;
          border-radius: 50%;
          border: 1px solid #ccc;
          overflow: hidden;
          margin: 0 10px;
          img {
            height: 60px;
          }
        }
      }
      .desc {
        font-size: 24px;
        color: #999;
        text-align: center;
        margin: 5px 0;
      }
    }
  }
  .rules-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1001 !important;
    .rules-item {
      padding: 20px 30px 50px;
      h1 {
        color: #444;
        font-weight: 600;
        width: 100%;
        text-align: center;
        line-height: 70px;
        font-size: 42px;
        margin-bottom: 40px;
      }
      p {
        text-indent: 2em;
        width: 100%;
        font-size: 28px;
        line-height: 44px;
        color: #666;
        padding-bottom: 10px;
      }
    }
  }
}
</style>
